<template>
  <div>
    <transition-group  name="el-fade-in-linear">
      <div v-for="i in 1" :key="i">

          <!-- Start Main content -->
      <main class="transition-box" v-loading="isOp" v-show="show">
        <div class="featured-slider-2">
          <div class="featured-slider-2-items">
            <div class="wrapper">
              <swiper ref="banner" :options="swiperOption1" :slides-per-view="3" :space-between="50" style="height:400px;">
                <swiper-slide v-for="i in 4" :key="i+(0*4)">
                  <div class="slider-single">
                    <div class="post-thumb position-relative" >
                      <div class="thumb-overlay position-relative "
                        @click="$commons.toWindodBlog(documents.records[i-1].id)"
                        :style="{ backgroundImage: 'url(' + documents.records[i-1].background + ')'}">
                        <div class="post-content-overlay">
                          <div class="container" style="margin-top:-250px;">
                            <div class="entry-meta meta-0 font-small mb-20">
                            </div>
                            <h1 class="post-title mb-20 font-weight-900 text-white">
                              <a class="text-white" href="javascript:void(0)">{{documents.records[i-1].title}}</a>
                            </h1>
                            <div class="entry-meta meta-1 font-small text-white mt-10 pr-5 pl-5">
                              <span class="post-on">{{$commons.dateStr(documents.records[i-1].updatetime)}} 更新</span>
                              <span class="hit-count has-dot">{{documents.records[i-1].views}} 观看</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </swiper-slide>
                <!-- Optional controls ,显示小点-->
                <div class="swiper-pagination" slot="pagination"></div>
              </swiper>
            </div>
          </div>
        </div>
        <!-- End feature -->
        <div class="container">
          <div class="hot-tags pt-30 pb-30 font-small align-self-center">
            <div class="widget-header-3">
              <div class="row align-self-center">
                <div class="col-md-4 align-self-center">
                  <h5 class="widget-title">星推荐·⭐</h5>
                </div>
                <div class="col-md-8 text-md-right font-small align-self-center">
                  <p class="d-inline-block mr-5 mb-0"><i class="elegant-icon  icon_tag_alt mr-5 text-muted"></i>热点:
                  </p>
                  <ul class="list-inline d-inline-block tags">
                    <li class="list-inline-item" v-for="(item,i) in keywords" :key="i"><a href="javascript:void(0)"
                        @click="$commons.toSearch(item)"># {{item}}</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="loop-grid mb-30">
            <div class="row">
              <div class="col-lg-8 mb-30">
                <div
                  class="carausel-post-1 hover-up border-radius-10 overflow-hidden transition-normal position-relative wow fadeInUp animated">
                  <div class="arrow-cover"></div>
                  <div class="slide-fade">
                    <swiper effect="fade" :options="swiperOption2" :slides-per-view="3" :space-between="50"
                      ref="window">
                      <swiper-slide v-for="i in 4" :key="i+(1*4)">
                        <ky-article :data="documents.records[i+(1*4)-1]" :tag="Array.from(tags)" module="window">
                        </ky-article>
                      </swiper-slide>
                      <div class="swiper-pagination" slot="pagination"></div>
                    </swiper>
                  </div>
                </div>
              </div>

              <div class="col-4" v-for="i in 4" :key="i+(2*4)">
                <ky-article :data="documents.records[i+(2*4)-1]" :tag="Array.from(tags)" :slogan="true" module="card">
                </ky-article>
              </div>

            </div>
          </div>
        </div>
        <div class="bg-grey pt-50 pb-50">
          <div class="container">
            <div class="row">
              <div class="col-lg-8">
                <div class="post-module-2">
                  <div class="widget-header-1 position-relative mb-30  wow fadeInUp animated">
                    <h5 class="mt-5 mb-30">帖子·随心访问</h5>
                  </div>
                  <div class="loop-list loop-list-style-1">
                    <div class="row">
                      <div class="col-6" v-for="i in 4" :key="i+(3*4)">
                        <ky-article :data="documents.records[i+(3*4)-1]" :tag="Array.from(tags)" module="card"
                          :slogan="true"></ky-article>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="post-module-3">
                  <div class="widget-header-1 position-relative mb-30">
                    <h5 class="mt-5 mb-30">历史·创作文章</h5>
                  </div>
                  <div class="loop-list loop-list-style-1">
                    <div class="col-12" v-for="i in 4" :key="i+(4*4)">
                      <ky-article :data="documents.records[i+(4*4)-1]" :tag="Array.from(tags)" module="list"></ky-article>
                    </div>

                  </div>
                </div>
                <div class="pagination-area mb-30 wow fadeInUp animated">
                  <nav aria-label="Page navigation example">

                  </nav>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="widget-area">
                  <ky-user :data="root" module="card"></ky-user>
                  <div class="sidebar-widget widget-latest-posts mb-50 wow fadeInUp animated">
                    <div class="widget-header-1 position-relative mb-30">
                      <h5 class="mt-5 mb-30">喜欢的</h5>
                    </div>
                    <div class="post-block-list post-module-1">
                      <ul class="list-post">
                        <li v-for="i in 4" :key="i+(5*4)">
                          <ky-article :data="documents.records[i+(5*4)-1]" :tag="Array.from(tags)" module="like">
                          </ky-article>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="sidebar-widget widget-latest-posts mb-50 wow fadeInUp animated">
                    <div class="widget-header-1 position-relative mb-30">
                      <h5 class="mt-5 mb-30">今日阅览</h5>

                    </div>
                    <div class="post-block-list post-module-2">
                      <div class="row">
                        <div style="display:inline;" class="col-4 mb-20" v-for="(item,i) in pics" :key="i*20">
                             <img class="border-radius-5" style="height:100px; wight:100px;" :src="item.urls.small" alt="">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="sidebar-widget widget_instagram wow fadeInUp animated">
                    <div class="widget-header-1 position-relative mb-30">
                      <h5 class="mt-5 mb-30">今日诗词</h5>
                    </div>
                    <div class="instagram-gellay">
                      <div class="container">
                        <img alt="今日诗词" class="mb-10" style="border-radius: 25px; height:400px; weight:200px;"
                          :src="poetryData.img"><br>
                        <div class="text-dark mt-10 " style="font-size:18px; text-align:center; margin:0 auro;">
                          {{poetryData.content}}
                        </div>
                      </div>

                      <!-- <ul class="insta-feed">
                        <li v-for="(item,i) in users" :key="i*20">
                          <ky-user :data="item" module="avater"></ky-user>
                        </li>
                        <li v-for="(item,i) in users" :key="i*33">
                          <ky-user :data="item" module="avater"></ky-user>
                        </li>
                      </ul> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <el-backtop class="bg-primary text-white" :bottom="70" @click="reFresh">
        <i class="el-icon-refresh"></i>
      </el-backtop>
      
    </div>
    </transition-group>
  </div>

</template>

<script>
  import KyArticle from '@/components/module/ky-article'
  import KyUser from '@/components/module/ky-user'
  import bus from '../utils/bus.js'
  export default {
    components: {
      KyArticle,
      KyUser
    },
    name: 'Main',
    setup() {
      const onSwiper = (swiper) => {
      };
      const onSlideChange = () => {
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
    computed: {
      wind() {
        return this.$refs.window.swiper
      },
      ban() {
        return this.$refs.banner.swiper
      }
    },
    data() {
      return {
        poetryData: {
          content: '',
          img: ''
        },
        keywords: [],
        show: true,
        isOp: false,
        tags: new Set(),
        currentINdex: 0,
        txtc: ['text-warning', 'text-danger', 'text-success', 'text-pink', 'text-primary', 'text-info',
          'text-secondary'
        ],
        swiperOption1: {
          // 参数选项,显示小点
          pagination: {
            el: ".swiper-pagination"
          }, //循环
          loop: true, //每张播放时长3秒，自动播放
          autoplay: {
            delay: 3000, //自动切换的时间间隔，单位ms
            stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
            stopOnLastSlide: true, //如果设置为true，当切换到最后一个slide时停止自动切换。
            disableOnInteraction: true, //用户操作swiper之后，是否禁止autoplay。
            reverseDirection: false, //开启反向自动轮播。
            waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
            disableOnInteraction: false,
            autoplayDisableOnInteraction: false
          },
          speed: 600,
        },
        swiperOption2: {
          // 参数选项,显示小点
          pagination: {
            el: ".swiper-pagination"
          }, //循环
          loop: true, //每张播放时长3秒，自动播放
          autoplay: {
            delay: 3000, //自动切换的时间间隔，单位ms
            stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
            stopOnLastSlide: true, //如果设置为true，当切换到最后一个slide时停止自动切换。
            disableOnInteraction: true, //用户操作swiper之后，是否禁止autoplay。
            reverseDirection: false, //开启反向自动轮播。
            waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
            disableOnInteraction: false,
            autoplayDisableOnInteraction: false
          },
          speed: 600,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }

        },

        documents: {
    "records": [
        {
            "id": 19,
            "title": "Ky-Blog的开发经历",
            "timestamp": 1646659515776,
            "context": null,
            "tag": "3-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/1629775673743_bg15.jpg",
            "slogan": "在二十多天以前，我下定决心要开发属于自己的博客，再也不用担心服务器闲置啦，后面的是用来凑字数的哇",
            "views": 331,
            "updatetime": 1646992330390
        },
        {
            "id": 52,
            "title": "恭祝祖国72周年华诞",
            "timestamp": 1646660696956,
            "context": null,
            "tag": "7-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/china10.1.jpg",
            "slogan": "中华人民共和国成立72周年",
            "views": 56,
            "updatetime": 1646992468684
        },
        {
            "id": 30,
            "title": "使用缓存计算阅读量",
            "timestamp": 1646660797252,
            "context": null,
            "tag": "2-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/1629775618356_bg10.jpg",
            "slogan": "众所周知木桶效应在生活中很普遍，一只木桶的储水量取决于它最短的一条木板，在不考虑缓存寄存器等情况下操作系统的读写性能也会受限于速度最慢的硬盘，而我们开发的项目也是如此，总是会受到频繁读写数据库",
            "views": 14,
            "updatetime": 1646992637278
        },
        {
            "id": 32,
            "title": "Linux设置自动重启",
            "timestamp": 1646660795078,
            "context": null,
            "tag": "5-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/1629775549625_bg1.jpg",
            "slogan": "为了防止在Linux部署的服务崩溃，可以设置自动重启来维持服务状态\n",
            "views": 8,
            "updatetime": 1646992630085
        },
        {
            "id": 28,
            "title": "Log组件的工作流程",
            "timestamp": 1646660798481,
            "context": null,
            "tag": "3-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/focus/1300416001.jpeg",
            "slogan": "这篇文章将会介绍Log组件的各个执行流程",
            "views": 3,
            "updatetime": 1646992643998
        },
        {
            "id": 35,
            "title": "救赎繁星",
            "timestamp": 1646660796094,
            "context": null,
            "tag": "1-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/1629775549625_bg1.jpg",
            "slogan": "等等我\n",
            "views": 3,
            "updatetime": 1646992599398
        },
        {
            "id": 43,
            "title": "第二个我",
            "timestamp": 1646660739052,
            "context": null,
            "tag": "1-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/2021_9_9_52.jpg",
            "slogan": "等到秋招顺利结束",
            "views": 3,
            "updatetime": 1646992535419
        },
        {
            "id": 31,
            "title": "Linux部署Springboot服务开机自启",
            "timestamp": 1646660797740,
            "context": null,
            "tag": "5-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/1629775549625_bg1.jpg",
            "slogan": "使用systemctl命令开启|关闭springboot项目",
            "views": 2,
            "updatetime": 1646992622552
        },
        {
            "id": 33,
            "title": "Linux服务器基本环境搭建",
            "timestamp": 1646660793030,
            "context": null,
            "tag": "5-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/1629775596794_bg7.jpg",
            "slogan": "教你如何在Aliyun Linux搭建FTP，JDK，MYSQL，NGINX这些常用服务\n",
            "views": 1,
            "updatetime": 1646992616338
        },
        {
            "id": 38,
            "title": "喜欢",
            "timestamp": 1646660761798,
            "context": null,
            "tag": "1-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/2021_9_9_34.jpg",
            "slogan": "一个真正喜欢你的人...\n",
            "views": 1,
            "updatetime": 1646992571047
        },
        {
            "id": 46,
            "title": "灯火通明",
            "timestamp": 1646660731492,
            "context": null,
            "tag": "1-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/2021_9_9_46.jpg",
            "slogan": "就算深夜也会灯火通明\n",
            "views": 1,
            "updatetime": 1646992336786
        },
        {
            "id": 51,
            "title": "卷式复习目录",
            "timestamp": 1646660702536,
            "context": null,
            "tag": "29-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/2021_9_9_17.jpg",
            "slogan": "呜呜呜，Java太特么卷了\n",
            "views": 1,
            "updatetime": 1646992477321
        },
        {
            "id": 39,
            "title": "MySQL四种隔离级别",
            "timestamp": 1646802970700,
            "context": null,
            "tag": "29-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/1629775652347_bg12.jpg",
            "slogan": "MySQL默认隔离级别是Repeatable read (可重复读) \n",
            "views": 0,
            "updatetime": 1646992562919
        },
        {
            "id": 29,
            "title": "Jcache正在向缓存转型",
            "timestamp": 1646660798870,
            "context": null,
            "tag": "4-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/focus/1650474669.jpeg",
            "slogan": "从外部配置到JAVA内缓存的转型框架，每一个项目或多或少都会有一些特别的数据要存储，他们一般是项目的名称，备案号等等，不想用数据库存储也不想存储到Redis怎么办呢，用JCache（原Config）\n",
            "views": 0,
            "updatetime": 1646992650599
        },
        {
            "id": 34,
            "title": "你会无端想起一个人吗",
            "timestamp": 1646660794156,
            "context": null,
            "tag": "1-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/1653924634.jpeg",
            "slogan": "我还是很想你啊\n",
            "views": 0,
            "updatetime": 1646992608964
        },
        {
            "id": 36,
            "title": "Redis如何处理缓存穿透，缓存雪崩和数据一致性问题",
            "timestamp": 1646660768925,
            "context": null,
            "tag": "4-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/1653924628.jpeg",
            "slogan": "缓存穿透：大量请求在根本不走缓存，直接到数据库访问，缓存雪崩：同一时间，缓存大面积失效，数据一致性：数据库更新，缓存也要更新\n",
            "views": 0,
            "updatetime": 1646992589898
        },
        {
            "id": 37,
            "title": "Docker学习",
            "timestamp": 1646660765792,
            "context": null,
            "tag": "6-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/1629775603294_bg8.jpg",
            "slogan": "Docker从入门到一键部署项目\n",
            "views": 0,
            "updatetime": 1646992579190
        },
        {
            "id": 40,
            "title": "随心归档",
            "timestamp": 1646660750692,
            "context": null,
            "tag": "1-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/2021_9_9_51.jpg",
            "slogan": "这里埋葬着九命可的梦想\n",
            "views": 0,
            "updatetime": 1646992461039
        },
        {
            "id": 41,
            "title": "一种体面的虚空",
            "timestamp": 1646660746504,
            "context": null,
            "tag": "1-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/2021_9_9_7.jpg",
            "slogan": "不知道你们在一个人努力的奋斗过程中有没有一种宇宙浩瀚苍凉的感觉",
            "views": 0,
            "updatetime": 1646992554477
        },
        {
            "id": 42,
            "title": "Docker-compose自动化部署Ky-blog",
            "timestamp": 1646660742267,
            "context": null,
            "tag": "6-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/2021_9_9_26.jpg",
            "slogan": "使用Docker服务编排自定义镜像\n",
            "views": 0,
            "updatetime": 1646992544196
        },
        {
            "id": 44,
            "title": "二元结",
            "timestamp": 1646660735185,
            "context": null,
            "tag": "1-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/2021_9_9_24.jpg",
            "slogan": "一种九命可身上的规律\n",
            "views": 0,
            "updatetime": 1646992521106
        },
        {
            "id": 47,
            "title": "星河万里",
            "timestamp": 1646660713554,
            "context": null,
            "tag": "1-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/2021_9_9_21.jpg",
            "slogan": "有些歌，听过了就知道很喜欢\n",
            "views": 0,
            "updatetime": 1646992505966
        },
        {
            "id": 48,
            "title": "中秋快乐",
            "timestamp": 1646660709585,
            "context": null,
            "tag": "1-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/2021_9_9_6.jpg",
            "slogan": "今晚看到了月亮，但是不想吃月饼?\n",
            "views": 0,
            "updatetime": 1646992499231
        },
        {
            "id": 50,
            "title": "Redis数据结构与对象",
            "timestamp": 1646660705425,
            "context": null,
            "tag": "4-",
            "status": null,
            "userid": 2000221,
            "background": "http://cloud.kingyin.club/img/banner/2021_9_9_13.jpg",
            "slogan": "一篇文章介绍redis的存储是如何实现的\n",
            "views": 0,
            "updatetime": 1646992486643
        }
    ],
    "total": 27,
    "size": 24,
    "current": 1,
    "orders": [],
    "optimizeCountSql": true,
    "hitCount": false,
    "countId": null,
    "maxLimit": null,
    "searchCount": true,
    "pages": 2
},
        root: {},
        pics: []
      }
    },
    methods: {
      async getPics() {
        const pram = {
          count:9
        }
        var res = await this.$api.search.randomPhoto(pram);
        if (res.code == 20000) {
          this.pics = res.data.res;
        }
      },
      async getPoetry() {
        var res = await this.$api.search.poetry();
        if (res.code == 20000) {
          this.poetryData = res.data;
        }
      },
      async getjiumingke() {
        this
        const pram = {
          userid: 2000221
        }
        var res = await this.$api.article.getUser(pram)
        if (res.code == 20000) {

          this.root = res.data;
          this.$forceUpdate();
        }

      },
      toSearch(data) {
        // 分发事件
        const pram = {
          name: 'open',
          data: data
        }
        bus.$emit('openSearch', pram);
      },
      async getKeyWords() {
        const pram = {
          size: 5
        }
        var res = await this.$api.search.keywords(pram);
        this.keywords = res.data;
        this.$forceUpdate();
      },
      handleSelect(item) {
      },
      showMain() {
        // 监听事件
        bus.$on('showMain', res => {
          if (res.name == 'router') {
            this.show = res.data;
            this.$forceUpdate()
          }

        })
      },
      reFresh() {

        this.documents.current = this.documents.current + 1;

        this.getHome();
      },
      async getHome() {
        this.isOp = true;
        if (this.documents.pages != -1 && (this.documents.total - this.documents.current * this.documents.size) <
          21) {
          this.documents.current = 1;
        }
        const pram = {
          current: this.documents.current
        }
        var res = await this.$api.core.home(pram)
        if (res.code == 20000) {
          this.documents = res.data;
          this.getTags();
        }
        this.isOp = false;
      },
      async getTags() {
        var arr = new Set()
        for (const d of this.documents.records) {
          if (!this.tags.has(d.userid)) {
            arr.add(d.userid);
          }
        }
        if (arr.size == 0) {
          return;
        }
        const pram = {
          ids: Array.from(arr).sort()
        }
        var res = await this.$api.core.tagIds(pram)
        if (res.code == 20000) {
          for (const t of res.data) {
            this.tags.add(t);
          }
        }
        this.$forceUpdate()
      },
      prev(val) {
        val.slidePrev();
      },
      next(val) {
        val.slideNext()
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getjiumingke();
      this.getKeyWords();
      this.showMain();
      this.getHome();
      this.getPics();
      this.getPoetry();
    },
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.swiper-height-400 {
  /* height: 400px; */
  background-size: auto 300px;
}
  /*重置覆盖分页器的样式*/
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #333;
    border-radius: 25px;
    opacity: 1;
    margin: 0 5px;
    outline: none;
  }

  /*重置覆盖分页器激活时的样式表现*/
  .swiper-pagination-bullet-active {
    background-color: #ccc;
  }

</style>
